<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        button {
            font-size: 12px;
        }

        table.imagetable th {
            background: #b5cfd2;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
        }


        a:hover{
            text-decoration: none;
        }

        #header {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 50px;
            background: #FAA732;
            text-align: center;
            line-height: 50px;
            color: white;
            font-weight: bold;
        }

        #iframebox1 {
            position: absolute;
            top: 50px;
            left: 0px;
            right: 0px;
            bottom: 51px;
            padding: 10px;
            overflow: auto;
        }

        #main li {
            display: flex;
            margin-bottom: 10px;
            padding: 10px;
            border-bottom: 1px solid gray;
            border-radius: 4px;
            background: #EEE;
        }

        #main li img {
            flex: 50px 0 0;
            width: 50px;
            height: 50px;
            padding: 4px;
            border: 1px solid green;
        }

        #main li span {
            padding-left: 4px;
            line-height: 24px;
        }

        #footer {
            display: flex;
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 50px;
            border-top: 1px solid gray;
            background: #FAA732;
        }

        #footer div {
            flex: 1;
            text-align: center;
            line-height: 50px;
            color: white;
            font-weight: bold;
            border-right: 1px solid white;
        }

        #footer div:nth-child(4) {
            border: none;
        }

        #footer .active {
            background: #0086FF;
        }

        #loading {
            position: fixed;
            left: 50%;
            bottom: 10%;
            transform: translate(-50%, 0);
            width: 50px;
            /* display: none;  */
            opacity: 0;
            /* animation: fade-in; */
            /* animation: fade-in 1s ; */
            /* -webkit-animation: fade-in 1s; */
            /*动画名称*/
            /* animation-duration: 1s; */
            /*动画持续时间*/
            /* -webkit-animation: fade-in 1s; */
            /*针对webkit内核*/

        }

        @keyframes fade-in {
            0% {
                opacity: 0;
            }

            /*初始状态 透明度为0*/
            40% {
                opacity: 1;
            }

            /*过渡状态 透明度为0*/
            100% {
                opacity: 0;
            }

            /*结束状态 透明度为1*/
        }

        @-webkit-keyframes fade-in {

            /*针对webkit内核*/
            0% {
                opacity: 0;
            }

            40% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    </style>

</head>

<body>
<header id="header">
    <button id="mess" class="btn btn-warning " type="button" onclick="toUpdateMe();">修改信息</button>
    <button id="pass" class="btn btn-warning " type="button" onclick="toUpdatePassword();">修改密码</button>
</header>
<div id="iframebox1" style="position: absolute;top: 50px">
    <iframe id="contentiframe" style="width:100%;height:100%;" frameborder="0"></iframe>
</div>

<footer id="footer">
    <div>
        <a onclick="getPage('/app/appMessage')">
            <span>资讯</span>
        </a>
    </div>
    <div>
        <a onclick="getPage('/app/appAdvice')">
            <span>意见箱</span>
        </a>
    </div>
    <div>
        <a onclick="getPage('/app/appMe')">
            <span>我的</span>
        </a>
    </div>

</footer>
<script th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/plugin/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/plugin/jquery-confirm/jquery-confirm.js}"></script>
<script type="text/javascript" th:src="@{/plugin/jquery-confirm/jquery-confirm_cn.js}"></script>
<script th:inline="javascript">
    $(function () {
        var url = [[${url}]];
        url == null ? url = "/app/appMessage" : displayTargetMenu(url);
        $("#contentiframe").attr('src', url);

    });

    /**
     * 弹出修改密码页面
     */
    function toUpdatePassword() {
        var url = '/toUpdatePassword';
        openWindow("修改密码", ['300px', '330px'], url);
    }

    /**
     * 弹出修改信息页面
     */
    function toUpdateMe() {
        var url = '/app/appUpdate';
        openWindow("修改信息", ['300px', '515px'], url);
    }

    //弹窗
    function openWindow(title, area, url, callback) {
        layer.open({
            type: 2,
            title: "<a class='layer_title'>" + title + "</a>",
            area: area,
            fixed: false,
            resize: false,
            contentType: 'application/x-www-form-urlencoded',
            content: url,
            success: function (currentDom, index) {
                if (callback == null || typeof(callback) == "undefined") {
                    return;
                }
                callback();
            }
        });
    }

    /**
     * 切换导航栏焦点方法
     * @param url
     */
    function displayTargetMenu(url) {
        $("#topmenu_click").removeAttr("id");
        var target = "index";
        switch (url) {
            case "/classInfo/modulePage":
                target = "classInfo";
                break;
            case "/studentInfo/modulePage":
                target = "studentInfo";
                break;
            case "/myInfo/getPage":
                target = "myInfo";
                break;
            case "/division/modulePage":
                target = "division";
                break;
        }
        $("." + target).attr("id", "topmenu_click");
    }

    $(".topmenu li").click(function () {
        $("#topmenu_click").removeAttr("id");
        $(this).attr("id", "topmenu_click");
    });
    $(".nextnav a").click(function () {
        $("#nextnav_click").removeAttr("id");
        $(this).attr("id", "nextnav_click");
    });

    //iframe切換
    function getPage(req) {
        $("#contentiframe").attr('src', req);
    }


    /**
     * 判断字符串是否为空
     * @param s
     * @returns {boolean}
     */
    function isEmpty(s) {
        if (typeof s == "undefined" || s == null || s == "") {
            return true;
        } else {
            return false;
        }
    }

    function closeWindow(msg) {
        layer.close(layer.index);
        if(msg != null && msg != ""){
            layer.msg(msg);
        }

    }

    function successClose(msg) {
        layer.close(layer.index);
        layer.msg(msg);
    }



    /**
     * 下拉选择框初始值
     *
     */
    function selectNumber(options,select){
        for (var j = 1; j < options.length; j++) {
            if ($(options[j]).val() == select) {
                $(options[j]).attr("selected", "selected");
            }
        }
    }

</script>

</body>
</html>